<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxLayout="column" *ngIf="selectedAsset">
    <mat-tree
        [dataSource]="dataSource"
        [treeControl]="treeControl"
        class="sp-tree"
        #tree
    >
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
            <sp-asset-browser-node
                class="w-100"
                [node]="node"
                [assetBrowserData]="assetBrowserData"
                [assetSelectionMode]="assetSelectionMode"
                [filteredAssetLinkType]="filteredAssetLinkType"
                [resourceCount]="resourceCount"
                [selectedAsset]="selectedAsset"
                (selectedNodeEmitter)="selectNode($event)"
            >
            </sp-asset-browser-node>
        </mat-tree-node>

        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
            <div class="mat-tree-node">
                <button
                    mat-icon-button
                    matTreeNodeToggle
                    [attr.data-cy]="'button-' + node.nodeName"
                    [attr.aria-label]="'Toggle ' + node.nodeName"
                >
                    <mat-icon class="mat-icon-rtl-mirror">
                        {{
                            treeControl.isExpanded(node)
                                ? 'expand_more'
                                : 'chevron_right'
                        }}
                    </mat-icon>
                </button>
                <sp-asset-browser-node
                    fxFlex="100"
                    [node]="node"
                    [assetBrowserData]="assetBrowserData"
                    [assetSelectionMode]="assetSelectionMode"
                    [filteredAssetLinkType]="filteredAssetLinkType"
                    [resourceCount]="resourceCount"
                    [selectedAsset]="selectedAsset"
                    (selectedNodeEmitter)="selectNode($event)"
                >
                </sp-asset-browser-node>
            </div>
            <div *ngIf="treeControl.isExpanded(node)" role="group">
                <ng-container matTreeNodeOutlet></ng-container>
            </div>
        </mat-nested-tree-node>
    </mat-tree>
</div>
